/*
 * @Author: luoqi
 * @Date: 2022-04-02 15:07:19
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-12 19:19:22
 * @Description: 
 */
import React, { useState,useEffect } from 'react';
import { Form, Input, Button, Select, Space, Card, Table, Tag, Popconfirm, message } from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';

import AddAdmin from './AddAdmin';
import ModifyAdmin from './ModifyAdmin';

import axios from '../../utils/axios'
import qs from 'qs'

const data = [
  {
    key: '1',
    id: 1,
    nickname: '小红红',
    phone: '15682563787',
    pwd: '123456',
    status: 1,
  },
  {
    key: '2',
    id: 1,
    nickname: '小红红',
    phone: '15682563787',
    pwd: '123456',
    status: 1,
  },
]

const Admin = () => {
  let [pag, setPag] = useState({ defaultCurrent: 1,  pageSize: 5 ,current:1,showTotal:total => `共 ${total} 条`,onChange:changePage})
  let [form]=Form.useForm()
  let [data, setData] = useState()
  //用于触发重新渲染页面
  let [num, setNum] = useState(0)
  //搜索或全部
  let [isAll,setIsAll]=useState(true)
  //页数更改时
  function changePage(page, pageSize) {
    console.log(page, pageSize);
    setPag({ ...pag, current: page, pageSize })
  }

  //页面加载完毕调接口，页数更改时调接口
  useEffect(() => {

    if(isAll){
      axios({
      url: '/admin/select',
      method: 'post',
      data: qs.stringify({
        page: pag.current,
        size: pag.pageSize,
      })
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        setIsAll(true)
        //给每一个加key
        setData(res.data.map(item => ({ ...item, key: item.id })))
        setPag({ ...pag, total: res.count })
        if (num == 1) {
          setNum(0)
        }

      }
    })
    }else{
      form.submit()
    }
    
  }, [pag.current, num,isAll])
  const onFinish = (values) => {
    console.log('Success:', values);
    axios({
      url: '/admin/select',
      method: 'post',
      data: qs.stringify({
        page: pag.current,
        size: pag.pageSize,
        username:values.username,
        phone:values.phone
      })
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        setIsAll(false)
        //给每一个加key
        setData(res.data.map(item => ({ ...item, key: item.id })))
        setPag({ ...pag, total: res.count })
        setNum(2)
      }
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  }
  //删除管理员
  function confirm(obj) {
    console.log(obj);
    axios({
      url: '/admin/delete',
      method: 'post',
      data: qs.stringify({ ids: obj.id.toString() })
    }).then(res => {
      console.log(res);
      if (res.code == '200') {
        message.success('删除成功');
        setNum(1)
      }
    })
  }

  function cancel(e) {
    console.log(e);
    message.error('Click on No');
  }
  const columns = [
    {
      title: '管理员id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '管理员用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '管理员手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '管理员密码',
      dataIndex: 'password',
      key: 'password',
    },
    {
      title: '管理员状态',
      dataIndex: 'status',
      key: 'status',
      render: text=>(text?'可用':'不可用')
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <ModifyAdmin data={record} setNum={setNum}/>
          <Popconfirm
            title="确定要删除该疾病吗?"
            onConfirm={()=>confirm(record)}
            onCancel={cancel}
            okText="确定"
            cancelText="取消"
          >
            <Button type="primary" ghost>删除</Button>
          </Popconfirm>

        </Space>
      ),
    },
  ];
  return (
    <div>
      <Form
        name="basic"
        form={form}
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Space>
          <Form.Item
            label="用户名"
            name="username"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="手机号"
            name="phone"
          >
            <Input />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType='submit' icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <AddAdmin setNum={setNum}/>
          </Form.Item>
        </Space>
      </Form>
      <Table columns={columns} dataSource={data} pagination={pag} />
    </div>
  );
}

export default Admin;
